<!DOCTYPE html>

<html>
	<head>
		<title>First Example</title>
		<script type="text/javascript" src="../libs/three.js"></script>
		<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="../libs/stats.js"></script>
		<script type="text/javascript" src="../libs/dat.gui.js"></script>
		<style >
			body{
				/* set margin to 0 and overflow to hidden, to use the complete page */

				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<!-- Div which will show the stats -->
		<div id="Stats-output">
		</div>

		<!-- Div which will hold the Output -->
		<div id="WebGL-output">
		</div>

		<!-- Javascript code that runs our Three.js examples -->
		<script type="text/javascript">
			//once everything is loaded, we run our Three.js stuff.
			$(function () {
				var stats = initStats();

 				//here we'll put the Three.js stuff
 				var scene = new THREE.Scene();

 				//add camera and renderer
 				var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 				var renderer = new THREE.WebGLRenderer();
 				renderer.setClearColor(0xEEEEEE, 1.0);
 				renderer.setSize(window.innerWidth, window.innerHeight);
 				renderer.shadowMapEnabled = true;

 				//add light 
 				var spotLight = new THREE.SpotLight(0xffffff);
 				spotLight.position.set(-40, 60 ,-10);
 				spotLight.castShadow = true;
 				scene.add(spotLight);

 				//add axis
 				// var axes = new THREE.AxisHelper(20);
 				// scene.add(axes);

 				//add plane
 				var planeGeo = new THREE.PlaneGeometry(60,20,1,1);
 				var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});
 				var plane = new THREE.Mesh(planeGeo, planeMaterial);
 				plane.rotation.x = -0.5*Math.PI;

 				plane.position.x = 15;
 				plane.position.y = 0;
 				plane.position.z = 0;
 				plane.receiveShadow = true;
 				scene.add(plane);

 				//add box(cube)
 				var boxGeo = new THREE.BoxGeometry(4,4,4);
 				var boxMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
 				var box = new THREE.Mesh(boxGeo, boxMaterial);
 				box.position.x = -4;
 				box.position.y = 3;
 				box.position.z = 0;
 				box.castShadow = true;
 				scene.add(box);

 				//add sphere
 				var sphereGeo = new THREE.SphereGeometry(4,20,20);
 				var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
 				var sphere = new THREE.Mesh(sphereGeo, sphereMaterial);
 				sphere.position.x = 20;
 				sphere.position.y = 4;
 				sphere.position.z = 2;
 				sphere.castShadow = true;

 				scene.add(sphere);


 				camera.position.x = -30;
 				camera.position.y = 40;
 				camera.position.z = 30;
 				camera.lookAt(scene.position);

 				$("#WebGL-output").append(renderer.domElement);
 				
 				//animation
 				var step = 0;
 				var controls = new function() {
 					this.rotationSpeed = 0.02;
 					this.bouncingSpeed = 0.03;
 				};
 				var gui = new dat.GUI();
 				gui.add(controls, 'rotationSpeed', 0,0.2);
 				gui.add(controls, 'bouncingSpeed', 0,0.2);

				render();
				function render(){
					stats.update();

					//rotate box
					box.rotation.x += controls.rotationSpeed;
					box.rotation.y += controls.rotationSpeed;
					box.rotation.z += controls.rotationSpeed;

					//jump sphere
					step += controls.bouncingSpeed;
					sphere.position.x = 20 + (10 * (Math.cos(step)));
					sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));


					requestAnimationFrame(render);
					renderer.render(scene, camera);

				}
			});


			function initStats(){
				var stats = new Stats();
				stats.setMode(0);
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.lefe = '0px';
				stats.domElement.style.top = '0px';
				$("#Stats-output").append(stats.domElement);
				return stats;
			}

		</script>

	</body>
</html>